<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Knowledgebooklet">知识小册</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer" style="height: auto;">
      <div style="display: flex;padding: 0 60px;" class="top">
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          名称:
          <el-input
            v-model="input"
            placeholder="请输入用户标题"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>

        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          状态:
          <el-select v-model="value" class="m-2">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>

        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
         
        </div>
      </div>
     
      <div class="bom">
        <button @click="tian()">添加</button>
        <div style="display: flex;flex-wrap: wrap;height:auto;">
          <div class="b" v-for="v in list" style="height:300px;">
            <img :src="v.img" lazy />
            <div style="border: 1px solid #ccc;border-top: none;">
              <p style="padding: 6px 0px;">{{ v.username }}</p>
              <p style="padding-bottom: 6px">{{ v.title }}</p>
            </div>
            <div
              style="border: 1px solid #ccc;border-top: none;height: 40px;line-height: 40px;padding: 0 4px;"
            >
              <el-icon style="padding:0px 22px;border-right: 1px solid #ccc;" @click="$router.push('/tiao/'+v.id)">
                <edit-outlined />
              </el-icon>

              <el-popover placement="top-start" :title="v.type" :width="200" trigger="hover">
                <template #reference>
                  <el-icon
                    style="padding:10px 22px;border-right: 1px solid #ccc;"
                    @click="shang(v.id)"
                  >
                  <cloud-download-outlined />
                  </el-icon>
                </template>
              </el-popover>

              <el-icon style="width: 20px;height: 20px;;padding:0px 22px;border-right: 1px solid #ccc;" @click="xiu(v.id)">
                <setting-outlined />
              </el-icon>
              <el-icon style="padding:0px 22px;" @click="shan(v.id)">
                <delete-outlined />
              </el-icon>
            </div>
          </div>
        </div>
        <div style="margin: 20px;">
          <el-pagination :page-size="10" :pager-count="11" layout="prev, pager, next" :total="10" />
        </div>
      </div>
    </div>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <div style="width: 100%;height: 30px;border-bottom: 1px solid #ccc;">更新知识库</div>
      <p style="display: flex;width: 400px;margin-top: 20px;line-height: 40px;">
        名称
        <el-input
          v-model="name"
          placeholder="Please input"
          style="width: 330px;padding-left: 10px;"
        />
      </p>
      <p style="display: flex;width: 400px;margin-top: 20px;line-height: 40px;">
        描述
        <el-input
          v-model="textarea"
          :rows="2"
          type="textarea"
          placeholder="Please input"
          style="width: 330px;padding-left: 10px;height: 40px;"
        />
      </p>
      <p style="margin-top: 20px;">
        评论
        <el-switch v-model="value1" />
      </p>
      <p>
        封面
        <img src="list1.img" />
      </p>

      <p>
        <el-input
          v-model="tupian"
          placeholder="Please input"
          style="width: 330px;padding-left: 10px;"
        />
      </p>
      <el-upload name="file" action="/api/upload">
        <el-button type="primary">选择文件夹</el-button>
      </el-upload>
      <button style="padding: 5px;" @click="chu()">移除</button>
      <button @click="qu()">取消</button>
      <button @click="geng()">更新</button>
    </el-drawer>
    <el-drawer v-model="drawer1" title="I am the title" :with-header="false">
      <div style="width: 100%;height: 30px;border-bottom: 1px solid #ccc;">更新知识库</div>
      <p style="display: flex;width: 400px;margin-top: 20px;line-height: 40px;">
        名称
        <el-input
          v-model="name"
          placeholder="Please input"
          style="width: 330px;padding-left: 10px;"
        />
      </p>
      <p style="display: flex;width: 400px;margin-top: 20px;line-height: 40px;">
        描述
        <el-input
          v-model="textarea"
          :rows="2"
          type="textarea"
          placeholder="Please input"
          style="width: 330px;padding-left: 10px;height: 40px;"
        />
      </p>
      <p style="margin-top: 20px;">
        评论
        <el-switch v-model="value1" />
      </p>

      <p>
        <el-input
          v-model="tupian"
          placeholder="Please input"
          style="width: 330px;padding-left: 10px;"
        />
      </p>

      <el-upload name="file" action="/api/upload">
        <el-button type="primary">选择文件夹</el-button>
      </el-upload>
      <button style="padding: 5px;" @click="chu()">移除</button>
      <button @click="qu()">取消</button>
      <button @click="chuang()">创建</button>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
import { defineComponent, ref, onMounted } from 'vue'
import { zhilie, zhishang, zhixin, zhigeng, zhishan, zhichuang,zhisou } from '../../api'
import type { UploadProps, UploadUserFile } from 'element-plus'
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  CloudDownloadOutlined,
  DeleteOutlined
} from "@ant-design/icons-vue";
import { ElMessageBox } from 'element-plus'
export default defineComponent({
  components: {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    CloudDownloadOutlined,
    DeleteOutlined,
    
  },
  setup() {
    const input = ref('')
    const id1 = ref('')
    const value = ref('')
    const name = ref('')
    const tupian = ref('')
    const list1 = ref('')
    const value1 = ref(true)
    const textarea = ref('')
    const token1 = localStorage.getItem('token1')
    const drawer = ref(false)
    const drawer1 = ref(false)
    const options = [
      {
        value: '发布上线',
        label: '发布上线',
      },
      {
        value: '设为草稿',
        label: '设为草稿',
      }
    ]


    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log(file, uploadFiles)
    }

    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
      console.log(uploadFile)
    }

    const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
      ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
      )
    }

    const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
      return ElMessageBox.confirm(
        `Cancel the transfert of ${uploadFile.name} ?`
      ).then(
        () => true,
        () => false
      )
    }

    const chong = () => {
      zhilie().then(res => {
        list.value = res.data.data
      })
      value.value = '',
        input.value = ''
    }
    const list = ref()
    onMounted(() => {
      zhilie().then(res => {
        list.value = res.data.data
      })
    })
    // 管理员或这用户

    // 搜索知识小册列表
    const sou = () => {
      console.log(value, input);
      if (token1 === '管理员') {
         zhisou({value,input}).then(res=>{
          console.log(res);
        
        list.value = res.data.data
     
         })

      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }

    const xiu = (id: any) => {
      console.log(token1);
      id1.value = id
      drawer.value = true
      if (token1 === '管理员') {
        zhixin({ id }).then(res => {
          console.log(res);
          name.value = res.data.data.username
          textarea.value = res.data.data.title
          tupian.value = res.data.data.img
          list1.value = res.data.data
          console.log(list1.value);

        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    // 图片移除
    const chu = () => {
      tupian.value = ''
      list1.value = ''
    }
    // 取消弹框
    const qu = () => {
      drawer.value = false
      drawer1.value = false
    }
    // 点击确认弹框
    const geng = () => {
      if (token1 === '管理员') {
        zhigeng({ name, textarea, tupian, id1 }).then(res => {
          console.log(res);
          zhilie().then(res => {
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    // 知识小册删除
    const shan = (id: any) => {
      if (token1 === '管理员') {
        zhishan({ id }).then(res => {
          console.log(res);
          zhilie().then(res => {
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    // 知识小册添加开关
    const tian = () => {
      name.value = '',
        textarea.value = ''
      tupian.value = ''
      drawer1.value = true
      console.log(name, tupian);
    }
    // 知识小册创建
    const chuang = () => {
      console.log(name, tupian, textarea);
      if (token1 === '管理员') {
        zhichuang({ name, tupian, textarea }).then(res => {
          console.log(res);
          zhilie().then(res => {
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }

    const shang = (id: any) => {
      if (token1 === '管理员') {
        zhishang({ id }).then(res => {
          console.log(res);
          zhilie().then(res => {
            list.value = res.data.data
          })
        })

      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
  
    return {
      drawer1,
      chuang,
      tian,
      geng,
      handleExceed,
      handlePreview,
      beforeRemove,
      handleRemove,
      chu,
      options,
      input,
      value,
      chong,
      sou,
      list,
      drawer,
      xiu,
      shang,
      name,
      textarea,
      value1,
      tupian,
      list1,
      qu,
      shan,

    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}
.top {
  width: 98%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
.bom {
  width: 98%;
  height: auto;
  background: #fff;
  margin-left: 20px;
}
.b {
  width: 260px;
  height: 260px;
  margin: 0 10px;
  padding-top: 10px;
}
.b img {
  width: 260px;
  height: 138px;
}
.el-icon {
  padding: 0 6px;
}
</style>
